<template>
  <div class="limiter">
    <div class="container-login100" style="background-image: url('./assets/images/img-01.jpg');">
        <div class="wrap-login100 p-t-190 p-b-30">
            <van-form 
              class="login100-form validate-form" 
              @submit="onSubmit" 
              label-align="center"
              scroll-to-error>
                <div class="login100-form-avatar">
                  <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                </div>

                <van-field
                  class="name"
                  v-model="name"
                  type="text"
                  name="手机号"
                  label="手机号"
                  placeholder="填写手机号"
                  :rules="[{ pattern: /^1[3|5|6|9]{1}\d{9}$/, message: '请填写正确的手机号' }]"
                />

                <van-field
                  class="password"
                  v-model="password"
                  type="password"
                  name="密码"
                  label="密码"
                  placeholder="填写密码"
                  :rules="[{ pattern: /^[\w|\W]{3}/, message: '密码至少三位' }]"
                />

                <van-button round block type="primary" native-type="submit" class="btn-sub">
                  登 录
                </van-button>

                <router-link to="/business/register" class="a">
                  立即注册
                </router-link>
            </van-form>
        </div>
    </div>

    <!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
  </div>
</template>

<script>
import { showFailToast,showSuccessToast } from 'vant';

export default{
  data() {
    return {
      name: '',
      password: '',
			isLoading: false,
    }
  },
  methods: {
    async onSubmit(){
			this.isLoading = false;
      const res = await this.$api.Login({ mobile: this.name, password: this.password });
      
      
      if (res.code == 1) {
        this.$cookies.set('User', res.data);
        showSuccessToast({ message: res.msg });
        this.$router.go(-1);
      } else {
        showFailToast({ message: res.msg })
      }
			this.isLoading = false;
    }
  },
  components:{
  }
}
</script>


<style>
  @import url('/assets/css/util.css');
  @import url("/assets/css/main.css");

  .name, .password{
    border-radius: 30px;
  }

  form > * {
    margin-bottom: 15px;
  }

  .a{
    display: block;
    margin: 20px auto 0 auto;
    color: white;
  }

  .btn-sub{
    color: black;
    background: aqua;
  }
</style>